.<template>
  <div class="content">
    <div class="columns" style="margin: 10px 10% 0px 10%">
      <div class="column">
        <div v-for="count in Math.ceil(total / 3)" :key="count">
          <vs-card>
            <template #title>
              <h3 @click="view(gallery[(count - 1) * 3].gid)">
                {{ gallery[(count - 1) * 3].title.String }}
              </h3>
              <i
                class="bx bx-tag"
                v-for="tag in gallery[(count - 1) * 3].tags"
                :key="tag"
                style="color: pink"
              >
                {{ tag.name ? tag.name : tag }}
              </i>
            </template>
            <template #img>
              <img
                v-lazy="gallery[(count - 1) * 3].images[0]"
                alt="Placeholder image"
              />
            </template>
            <template #text>
              <p style="padding: 0px 10px 15px 0px">
                <!-- {{ gallery[(count - 1) * 3].raw.text.substr(0, 100) }} -->
                <br />
                <time datetime="2016-1-1" style="float: right">
                  {{
                    gallery[(count - 1) * 3].date.Time | dateformat("MM月DD日")
                  }}
                </time>
              </p>
            </template>
            <template #interactions>
              <b-tooltip
                :label="lovenum"
                type="is-light"
                :delay="500"
                position="is-top"
              >
                <vs-button danger icon>
                  <i
                    class="bx bx-heart"
                    @mouseover="lovecount((count - 1) * 3)"
                    @click="love((count - 1) * 3)"
                  ></i>
                </vs-button>
              </b-tooltip>
              <vs-button
                icon
                color="black"
                v-if="test((count - 1) * 3)"
                @click="del((count - 1) * 3)"
              >
                <i class="bx bx-message-square-x"></i>
              </vs-button>
              <vs-button
                class="btn-chat"
                shadow
                primary
                @click="zone(gallery[(count - 1) * 3].userid)"
              >
                <i class="bx bx-user"></i>
                <span class="span">
                  {{ gallery[(count - 1) * 3].username.String }}
                </span>
              </vs-button>
            </template>
          </vs-card>
          <div style="padding: 5px"></div>
        </div>
      </div>
      <div class="column">
        <div v-for="count in Math.ceil(total / 3)" :key="count">
          <vs-card type="2">
            <template #title>
              <h3
                @click="view(gallery[(count - 1) * 3 + 1].gid)"
                style="color: white"
              >
                {{ gallery[(count - 1) * 3 + 1].title.String }}
              </h3>
            </template>
            <template #img>
              <img
                v-lazy="gallery[(count - 1) * 3 + 1].images[0]"
                alt="Placeholder image"
              />
            </template>
            <template #text>
              <p>
                <!-- {{ gallery[(count - 1) * 3 + 1].raw.text.substr(0, 100) }}
            <br />  -->
                <i
                  class="bx bx-tag"
                  v-for="tag in gallery[(count - 1) * 3 + 1].tags"
                  :key="tag"
                  style="color: pink"
                >
                  {{ tag.name ? tag.name : tag }}
                </i>
                <br />
                <time datetime="2016-1-1" style="float: right">
                  {{
                    gallery[(count - 1) * 3 + 1].date.Time
                      | dateformat("MM月DD日")
                  }}
                </time>
              </p>
            </template>
            <template #interactions>
              <b-tooltip
                :label="lovenum"
                type="is-light"
                :delay="500"
                position="is-bottom"
              >
                <vs-button danger icon>
                  <i
                    class="bx bx-heart"
                    @mouseover="lovecount((count - 1) * 3 + 1)"
                    @click="love((count - 1) * 3 + 1)"
                  ></i>
                </vs-button>
              </b-tooltip>
              <vs-button
                icon
                color="black"
                v-if="test((count - 1) * 3 + 1)"
                @click="del((count - 1) * 3 + 1)"
              >
                <i class="bx bx-message-square-x"></i>
              </vs-button>
              <vs-button
                class="btn-chat"
                shadow
                primary
                @click="zone(gallery[(count - 1) * 3 + 1].userid)"
              >
                <i class="bx bx-user"></i>
                <span class="span">
                  {{ gallery[(count - 1) * 3 + 1].username.String }}
                </span>
              </vs-button>
            </template>
          </vs-card>
          <div style="padding: 20px"></div>
          
          <div style="padding: 20px"></div>
        </div>
      </div>
      <div class="column">
        <div v-for="count in Math.ceil(total / 3)" :key="count">
          <vs-card type="5">
            <template #title>
              <h3 @click="view(gallery[(count - 1) * 3 + 2].gid)">
                {{ gallery[(count - 1) * 3 + 2].title.String }}
              </h3>
              <i
                class="bx bx-tag"
                v-for="tag in gallery[(count - 1) * 3 + 2].tags"
                :key="tag"
                style="color: pink"
              >
                {{ tag.name ? tag.name : tag }}
              </i>
            </template>
            <template #img>
              <img
                v-lazy="gallery[(count - 1) * 3 + 2].images[0]"
                alt="Placeholder image"
              />
            </template>
            <template #text>
              <p>
                <!-- {{ gallery[(count - 1) * 3 + 2].raw.text.substr(0, 100) }}
                <br /> -->
                <time datetime="2016-1-1" style="float: right">
                  {{
                    gallery[(count - 1) * 3 + 2].date.Time
                      | dateformat("MM月DD日")
                  }}
                </time>
              </p>
            </template>
            <template #interactions>
              <!-- <vs-button danger icon>
                <i class="bx bx-heart"></i>
              </vs-button> -->
              <b-tooltip
                :label="lovenum"
                type="is-light"
                :delay="500"
                position="is-top"
              >
                <vs-button danger icon>
                  <i
                    class="bx bx-heart"
                    @mouseover="lovecount((count - 1) * 3 + 2)"
                    @click="love((count - 1) * 3 + 2)"
                  ></i>
                </vs-button>
              </b-tooltip>
              <vs-button
                icon
                color="black"
                v-if="test((count - 1) * 3 + 2)"
                @click="del((count - 1) * 3 + 2)"
              >
                <i class="bx bx-message-square-x"></i>
              </vs-button>
              <vs-button
                class="btn-chat"
                shadow
                primary
                @click="zone(gallery[(count - 1) * 3 + 2].userid)"
              >
                <i class="bx bx-user"></i>
                <span class="span">
                  {{ gallery[(count - 1) * 3 + 2].username.String }}
                </span>
              </vs-button>
            </template>
          </vs-card>
          
          <div style="padding: 30px"></div>
        </div>
      </div>
    </div>
    <hr />

    <!-- <div class="center">
      <vs-pagination v-model="current" :length="20" @change="nextpage" />
    </div> -->

    <!-- 下方一栏数据 -->
    <!-- <div class="columns" style="padding: 50px">
      <div v-for="items in gallery" :key="items">
        <div class="column">
          <div class="card">
            <div class="card-image">
              <figure>
                <img v-lazy="items.raw.images[0].compressed" alt="Placeholder image" />
              </figure>
            </div>
            <div class="card-content">
              <div class="media">
                <div class="media-left">
                  <figure class="image is-48x48">
                    <img
                      src="https://bulma.io/images/placeholders/96x96.png"
                      alt="Placeholder image"
                    />
                  </figure>
                </div>
                <div class="media-content">
                  <p class="title is-4" @click="view(items.gid)">
                    {{ items.raw.title }}
                  </p>
                  <p class="subtitle is-6">{{ items.raw.username }}</p>
                </div>
              </div>
              <b-tag type="is-warning" v-for="tag in items.raw.tags" :key="tag">{{ tag.name ? tag.name : tag }}</b-tag>

              <div class="content">
                {{ items.raw.text.substr(0, 100) }}
                <br />
                <time datetime="2016-1-1">{{ items.last_update }}</time>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "gallreyContent",
  data() {
    return {
      gallery: [],
      total: 0,
      current: 1,
      perPage: 6,
      rangeBefore: 3,
      rangeAfter: 1,
      order: "",
      size: "",
      postinfo: "",
      isSimple: false,
      isRounded: true,
      prevIcon: "chevron-left",
      nextIcon: "chevron-right",
      lovenum: "",
      level: "",
      uid: "",
    };
  },
  mounted() {
    this.scroll(this.person);
  },
  methods: {
    async zone(uid) {
      this.$router.push({
        path: "/zone",
        query: {
          uid: uid,
        },
      });
    },
    async del(count) {
      let temp = await this.$http.delete(
        "/go/pic/del/" + this.gallery[count].gid,
        {
          headers: {
            pass: "",
            Authorization: "Bearer " + (await localStorage.getItem("token")),
          },
        }
      );
      console.log(temp.data);
      if (temp.data.status != 20000) {
        this.$vs.notification({
          title: "删除有问题",
        });
      }
      temp = await this.$http.delete(
        "/api/gallery/delete/" + this.gallery[count].gid,
        {
          headers: {
            pass: "",
            Authorization: "Bearer " + (await localStorage.getItem("token")),
          },
        }
      );
      console.log(temp.data);
      if (temp.data.status == 20000) {
        this.$vs.notification({
          title: "删除成功",
        });
      }
    },
    test(count) {
      if (this.gallery[count].userid == localStorage.getItem("uid")) {
        return true;
      }
      if (
        localStorage.getItem("level") == "admin" ||
        localStorage.getItem("level") == "root"
      ) {
        return true;
      }
      return false;
    },
    async love(count) {
      let res = await this.$http.post(
        "/api/gallery/niceJob",
        {},
        {
          params: {
            gid: this.gallery[count].gid,
          },
          headers: {
            pass: "",
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        }
      );
      console.log(res.data);
      if (res.data.status == 40000) {
        this.$vs.notification({
          title: "不要重复点赞",
        });
      } else if (res.data.status == 20000) {
        this.$vs.notification({
          title: "点赞成功",
        });
      }
    },
    async lovecount(count) {
      this.lovenum = "";
      console.log(count);
      let res = await this.$http.get("/api/gallery/niceCount", {
        params: {
          gid: this.gallery[count].gid,
        },
        headers: {
          pass: "",
          Authorization: "Bearer " + (await localStorage.getItem("token")),
        },
      });
      console.log(res.data);
      if (res.data.status == 40000) {
        this.lovenum = "0";
      } else if (res.data.status == 20000) {
        this.lovenum = res.data.nice.toString();
      }
    },
    scroll() {
      window.onscroll = async () => {
        let bottomOfWindow =
          document.documentElement.scrollTop + window.innerHeight + 5 >=
          document.body.scrollHeight;
        // console.log(
        //   bottomOfWindow,
        //   document.documentElement.scrollTop + window.innerHeight,
        //   document.body.scrollHeight,
        //   Math.ceil(this.total / this.perPage)
        // );
        if (
          bottomOfWindow &&
          this.current <= Math.ceil(this.total / this.perPage)
        ) {
          this.current += 1;
          let res = await this.$http.get(
            "/go/pic/p/" + this.current.toString(),
            {
              headers: {
                pass: "",
                Authorization:
                  "Bearer " + (await localStorage.getItem("token")),
              },
            }
          );
          // console.log(res)
          if (res.data.data.length > 0) {
            this.total += res.data.data.length;
          }
          // console.log(this.total)
          this.gallery = this.gallery.concat(res.data.data);
          // console.log(this.gallery, this.total);
        }
      };
    },
    refresh() {
      this.$router.go(0);
    },
    view(id) {
      this.$router.push({
        name: "Gallery",
        query: {
          gid: id,
        },
      });
    },
    show(file) {
      console.log(file);
    },
    deleteDropFile(index) {
      this.dropFiles.splice(index, 1);
    },
    // async nextpage(val) {
    //   let res = await this.$http.get("/go/pic/p/" + val.toString(), {
    //     headers: {
    //       pass: "",
    //       Authorization: "Bearer " + (await localStorage.getItem("token")),
    //     },
    //   });
    //   this.gallery = res.data.gallery;
    // },
  },
  async beforeCreate() {
    this.level = localStorage.getItem("level");
    this.uid = localStorage.getItem("uid");
    console.log(this.level, this.uid);

    this.$vs.notification({
      title: "欢迎",
    });

    let res = await this.$http.get("/go/pic/p/1", {
      headers: {
        pass: "",
        Authorization: "Bearer " + (await localStorage.getItem("token")),
      },
    });
    this.gallery = res.data.data;
    this.total = res.data.data.length;
  },
};
</script>

<style scoped>
.content {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0' gradientTransform='rotate(86,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='15.179999999999998'%3E%3Cpath transform='translate(-57.4 9.2) rotate(4.7 1409 581) scale(1.00837)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='5.06' transform='translate(-47.5 37) rotate(7.6 800 450) scale(1.011955)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(22.1 -79.5) rotate(72.5 401 736) scale(1.011955)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='4.6'%3E%3Cpath transform='translate(222 -7.8) rotate(1.95 150 345) scale(0.9767899999999998)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='10.12' transform='translate(-109.5 -96) rotate(82.8 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='translate(-182.8 57.2) rotate(13.8 1400 132) scale(0.965)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}
</style>